<template>
	<div  id="detail">
		<div class="header" >
				<div class="return_btn"  @click="back">
					<router-link class="mui-icon mui-icon-back" to="/wechat" ></router-link ></div>
				<div class="header_search">商品详情</div>
				<div class="mui-icon mui-icon-redo" @click="share"></div>			
		</div>
		<div class="cargos">
			<img :src="imgs">
			<p>夫山泉4L×6 健康饮用水 瓶装纯净水</p>
			<p class="cargosPrice">{{price}}</p>
		</div>
		<div class="taoCz">
			<div class="taoCzImg"><img src="../assets/czlogo.png" alt=""></div>
			<div class="taoCzShop">
				<h5>淘常州自营</h5>
				<p>满69.00元免运费(次日达)</p>
			</div>
			<div class="mui-icon mui-icon-forward"></div>
		</div>
		<!-- 购买该商品的人还买了 -->
		<div class="other_buy">
			<ul class="other_buy_ul">
				<li>
					<img class="cargo_img" src="http://pic20.taocz.cn/store_83/goods/20160614/middle_201606141028092071.jpg" alt="">
					<p class="cargo_name">农夫山泉 茶π果味 蜜桃乌龙茶500ml</p>
					<span class="cargo_price">$5</span>
				</li>
				<li>
					<img class="cargo_img" src="http://pic20.taocz.cn/store_83/goods/20160614/middle_201606141028092071.jpg" alt="">
					<p class="cargo_name">农夫山泉 茶π果味 蜜桃乌龙茶500ml</p>
					<span class="cargo_price">$5</span>
				</li>
				<li>
					<img class="cargo_img" src="http://pic20.taocz.cn/store_83/goods/20160614/middle_201606141028092071.jpg" alt="">
					<p class="cargo_name">农夫山泉 茶π果味 蜜桃乌龙茶500ml</p>
					<span class="cargo_price">$5</span>
				</li>
				<li>
					<img class="cargo_img" src="http://pic20.taocz.cn/store_83/goods/20160614/middle_201606141028092071.jpg" alt="">
					<p class="cargo_name">农夫山泉 茶π果味 蜜桃乌龙茶500ml</p>
					<span class="cargo_price">$5</span>
				</li>
				<li>
					<img class="cargo_img" src="http://pic20.taocz.cn/store_83/goods/20160614/middle_201606141028092071.jpg" alt="">
					<p class="cargo_name">农夫山泉 茶π果味 蜜桃乌龙茶500ml</p>
					<span class="cargo_price">$5</span>
				</li>
			</ul>
		</div>
		<div id="share" v-show="false">
			<span class="mui-icon mui-icon-weixin"></span>
			<span class="mui-icon mui-icon-pengyouquan"></span>
		</div>
	</div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	#detail{
		width: 100%;
		background: #fff;
		margin-bottom:3rem; 
	}
	a{
		color:#8b8b8b;
		font-size:2rem;
	}
	
	.header{
		width: 100%;
		height:4rem;
		padding: 0.5rem 0;
		background: red;
		color:#fff;
		display: flex;
	}
	.header .return_btn .mui-icon{
		color:#fff;
		font-size: 3.5rem;
		display: inline-block;
	}
	.header_search{
		width: 73%;
		height:3rem;
		color: #fff;
		line-height: 3rem;
		text-align: center;
		font-size: 2rem;

	}
	.header .mui-icon-redo{
		font-size: 3rem;
		padding-right: 0.8rem;
	}
	.cargos{
		width: 100%;
		text-align: center;
		border-bottom: 1px solid #8b8b8b;

	}
	/*产品信息*/
	.cargos img{
		width: 85%;
	}
	.cargosWater{
		text-align: center;

	}
	.cargosPrice{
		text-align: center;
		color: orange;
	}
	/*店铺活动*/
	.taoCz{
		width: 100%;
		height:9rem;
		display: flex;
		overflow: hidden;

	}
	.taoCzImg{
		width: 30%;
		height:5rem;
		padding: 2rem 0;
		text-align: center;
	}
	.taoCzImg img{
		padding: 1.5rem 0;
		width: 60%;
	}
	.taoCzShop{
		width: 60%;
		height:4rem;
		padding: 0.5rem 0;
		text-indent: 1rem;
		width: 60%;
	}
	.taoCzShop h5{
		height: 4rem;
		line-height: 4rem;
		font-size: 2rem;
		color:#000;
	}
	.mui-icon-forward{
		width: 10%;
		height:9rem;
		line-height: 9rem;
	}
	/*购买其他*/
	.other_buy{
		width: 100%;
		overflow-x: auto; 
	}
	.other_buy_ul{
		width: 100%;
		display: flex;
	}
	.other_buy_ul li{
		width: 25%;
		color: 1rem;
	}
	.other_buy_ul li .cargo_img{
		width: 100%;
	}
	.cargo_name{
		white-space:nowrap;
		text-overflow: ellipsis;
		overflow: hidden; 
		font-size: 0.8rem;
	}
	.cargo_price{
		color:orange;
		font-size: 0.9rem;
	}
	#share{
		width: 100%;
		height:6rem;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
	}
</style>
<script>
	export default {
		name:'Detailpage',

		data () {
			return {
				msg:"hello",
				detailCargo:"",
				imgs:"",
				price:"",
				information:"",
				bol:true

			}
		},
		methods:{
			share:function(){
				// console.log(this.bol);
				// this.bol=false
			},
			back:function(){
				$('#list').show();			}
		},
		created:function(){
				this.detailCargo= JSON.parse(localStorage.detail);
				this.imgs =  this.detailCargo.img;
				this.price = this.detailCargo.price;
				this.information = this.detailCargo.information;
				console.log(this.detailCargo.price);
				
		}
	}
</script>